<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="系统评价">
      <el-radio-group v-model="form.system" @change="updateSummary">
        <el-radio label="非常方便" name="system" />
        <el-radio label="比较方便" name="system" />
        <el-radio label="一般" name="system" />
        <el-radio label="很麻烦" name="system" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="布局评价">
      <el-radio-group v-model="form.layout" @change="updateSummary">
        <el-radio label="喜欢当前布局" name="layout" />
        <el-radio label="不喜欢当前布局" name="layout" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="配色评价">
      <el-radio-group v-model="form.color" @change="updateSummary">
        <el-radio label="喜欢当前配色" name="color" />
        <el-radio label="不喜欢当前配色" name="color" />
      </el-radio-group>
    </el-form-item>

    <!-- 显示汇总反馈信息 -->
    <el-form-item label="综合反馈">
      <el-input v-model="form.content" type="textarea" placeholder="在这里输入您的额外反馈..." />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即提交</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { updateList } from '@/api/user'
export default {
  data() {
    return {
      form: {
        account: '',
        content: '',
        summaryFeedback: '' // 用于显示汇总后的反馈信息
      },
      selectedFeedback: {
        system: '', // 系统评价选中的项
        layout: '', // 布局评价选中的项
        color: '' // 配色评价选中的项
      }
    }
  },
  async mounted() {
    // this.updateSummary(); // 修改为调用updateSummary
  },
  methods: {
    updateSummary() {
      this.form.summaryFeedback = `系统评价：${this.selectedFeedback.system}，布局评价：${this.selectedFeedback.layout}，配色评价：${this.selectedFeedback.color}`
    },
    async onSubmit() {
      // 在这里添加提交逻辑，比如发送一个POST请求到后端API
      console.log('submitting feedback:', this.form)
      const res = await updateList(this.form)
      console.log(res)
      // 示例：使用axios发送数据到后端API
      // 确保已安装axios库（npm install axios）并导入axios
      // import axios from 'axios';

      // 发送POST请求
      // axios.post('/api/feedback', {
      //   feedback: this.form.summaryFeedback,
      // })
      // .then(response => {
      //   console.log('Feedback submitted successfully:', response.data);
      //   // 可以在此处处理成功的响应，如弹出提示、重置表单等
      // })
      // .catch(error => {
      //   console.error('Error submitting feedback:', error);
      //   // 处理错误情况，如网络问题、后端返回错误等
      // });

      // 如果您没有使用axios，也可以使用fetch API 或 Vue-resource 等其他HTTP客户端。
    }
  }
}
</script>
